<style lang="less">
</style>

<template>
  <div>
    <Card>
      <Row>
        <Col span="2" align="center" style="line-height: 2;">评价标题</Col>
        <Col span="4">
          <Input v-model="params.pingjia_title" style="width: 80%" placeholder="请输入评价标题"></Input>
        </Col>
        <Col span="2" align="center" style="line-height: 2;">评价状态</Col>
        <Col span="4">
          <Select v-model="params.pingjia_state" style="width: 70%">
            <Option value="">全部</Option>
            <Option value="0">未启用</Option>
            <Option value="1">已启用</Option>
          </Select>
        </Col>
        <Col span="2">
          <Button type="primary" icon="ios-search" @click="initList(params)">搜索</Button>
        </Col>
        <Col span="2">
          <Button type="primary" icon="ios-search" @click="addSetting">添加</Button>
        </Col>
      </Row>
    </Card>
    <Card style="margin-top: 2%">
      <Table stripe :columns="columns1" :data="data1">
        <template slot-scope="{ row, index }" slot="pingjia_state">
          <i-switch v-model="row.pingjia_state" true-value="1" false-value="0" size="large" disabled="">
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
          </i-switch>
        </template>
        <template slot-scope="{ row, index }" slot="pingjia_max_star">
          <Rate show-text disabled v-model="row.pingjia_max_star"/>
        </template>
      </Table>
    </Card>
    <Modal v-model="modal.show" :title="modal.title" width="360">
      <Form :model="formData" :label-width="100">
        <FormItem label="评价标题">
          <Input v-model="formData.pingjia_title"></Input>
        </FormItem>
        <FormItem label="评价最高星级">
          <InputNumber :min="0" :max="5" style="width: 100%" v-model="formData.pingjia_max_star"></InputNumber>
        </FormItem>
        <FormItem label="排序">
          <InputNumber :min="0" style="width: 100%" v-model="formData.sort"></InputNumber>
        </FormItem>
        <FormItem label="评价状态">
          <RadioGroup v-model="formData.pingjia_state" type="button">
            <Radio label="0">关闭</Radio>
            <Radio label="1">启用</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modal.show = false">取消</Button>
        <Button v-if="modal.type === '1'" type="primary" @click="addSettingOk">保存</Button>
        <Button v-if="modal.type === '2'" type="primary" @click="updateSettingOk">保存</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { createSuqiuPingjiaSetting, getSuqiuPingjiaSettingList, updateSuqiuPingjiaSetting } from '@/api/ywtg'

export default {
  data () {
    return {
      modal: {
        show: false,
        title: '',
        type: ''
      },
      columns1: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '评价标题',
          key: 'pingjia_title',
          align: 'center'
        },
        {
          title: '评价最高星级',
          slot: 'pingjia_max_star',
          align: 'center'
        },
        {
          title: '评价状态',
          slot: 'pingjia_state',
          align: 'center'
        },
        {
          title: '排序',
          key: 'sort',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'create_time',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'success', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.formData = params.row
                    this.modal.title = '编辑诉求评价'
                    this.modal.type = '2'
                    this.modal.show = true
                  }
                }
              }, '编辑'))
            return h('div', temp)
          }
        }
      ],
      data1: [],
      formData: {},
      params: {}
    }
  },
  computed: {},
  methods: {
    initList (param) {
      getSuqiuPingjiaSettingList(param).then(res => {
        console.log(res.data.data)
        if (res.data.errcode === 0) {
          this.data1 = res.data.data
        } else {
          this.$Notice.error({
            title: '获取诉求评价设置列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    addSetting () {
      this.modal.title = '创建诉求评价'
      this.modal.type = '1'
      this.modal.show = true
    },
    addSettingOk () {
      createSuqiuPingjiaSetting(this.formData).then(res => {
        console.log(res.data.data)
        if (res.data.errcode === 0) {
          this.$Message.success('添加诉求评价成功')
          this.formData = {}
          this.modal.show = false
          this.initList()
        } else {
          this.$Notice.error({
            title: '添加诉求评价失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    updateSettingOk () {
      updateSuqiuPingjiaSetting(this.formData).then(res => {
        console.log(res.data.data)
        if (res.data.errcode === 0) {
          this.$Message.success('修改诉求评价成功')
          this.formData = {}
          this.modal.show = false
          this.initList()
        } else {
          this.$Notice.error({
            title: '修改诉求评价失败',
            desc: res.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.initList()
  }
}
</script>
